<template>
 <div class="container-wrapper" >
<mt-cell class="status" title="状态" :value="item.status==1?'预约成功':item.status==0?'待确认':'拒绝预约'"></mt-cell>
<mt-cell title="被访部门" :value="item.department"></mt-cell>
<mt-cell title="被访者姓名" :value="item.name"></mt-cell>
<mt-cell title="被访者手机" :value="item.phone"></mt-cell>
<mt-cell title="到访时间" :value="item.time"></mt-cell>
<mt-cell title="到访人数" :value="item.people"></mt-cell>
<mt-cell title="到访事由" :value="item.for"></mt-cell>
<mt-cell title="车牌号" :value="item.carCode"></mt-cell>

<mt-cell class="last" v-if="item.status==-1" title="拒绝原因" :value="item.reason"></mt-cell>
 </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
export default {
  name: "Index",
  data() {
    return {
      item: {
        department: "智慧城市",
        phone:13066914002,
        name: "张三",
        time: "2018-07-20 12:40:50",
        for: "参加面试",
        status: -1,
        reason:"开会",
        people: 10,
        carCode: "粤A40025"
      }
    };
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.container-wrapper{
    position: absolute;
    top:0;
    width: 100%;
    padding-top: 20px;
    background: rgb(245, 245, 245);
    bottom: 0;
}
.last{
position: relative;
margin-top: 15px;
}

.status::after{
    position: relative;
    color: red;
}
</style>
